<template>
    <!-- 左边：标签导航栏 -->
    <div class="h-[44px] pl-2 pr-4 right-0 z-50 flex items-center bg-white transation-all duration-300 shadow" :style="{left: menuStore.menuWidth}">
        <el-tabs v-model="activeTab" type="card" class="demo-tabs ml-6 mt-10 transation-all duration-300" style="min-width: 10px;"
        @tab-remove="removeTab" @tab-change="tabChange">
            <el-tab-pane v-for="item in tabList" :key="item.path" :label="item.title" :name="item.path" :closable="item.path !== '/admin/index'"
                class="transation-all duration-300">
                
            </el-tab-pane>
        </el-tabs>
        <!-- 右侧下拉菜单 -->
        <span class="ml-auto">
            <el-dropdown @command="handleCloseTab">
                <span class="el-dropdown-link no-outline">
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="closeOthers">关闭其他</el-dropdown-item>
                        <el-dropdown-item command="closeAll">关闭全部</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </span>
    </div>
    <div class="h-[44px]"></div>
    
    
</template>

<script lang="ts" setup>
import { useTagList} from '@/composables/useTagList'
// 标签页相关
const {  menuStore, tabList, activeTab, removeTab, tabChange, handleCloseTab } = useTagList()



</script>


<style scoped>
.el-tabs__item {
    font-size: 12px;
    border: 1px solid #d8dce5!important;
    border-radius: 3px!important;
}

.el-tabs--card>.el-tabs__header .el-tabs__item {
    margin-left: 0.1rem!important;
    margin-right: 0.1rem!important;
}

.el-tabs__item.is-active {
    background-color: var(--el-color-primary)!important;
    color: #fff;
}

.el-tabs__item.is-active::before {
    content: "";
    background-color: #fff;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
    margin-right: 4px;
}

.el-tabs {
    height: 32px;
}


.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: 0;
}

.el-tabs--card>.el-tabs__header .el-tabs__item {
    height: 32px;
    line-height: 32px;
    border: 0;
    background: #fff;
}

.el-tabs--card>.el-tabs__header {
    border: 0;
}

.el-tabs__nav-prev, .el-tabs__nav-next {
    line-height: 35px;
}

.is-disabled {
    cursor: not-allowed;
    color: #d1d5db;
}
.no-outline {
    outline: none;
}

</style>